<template>
  <div class="neon-bar" v-if="progressBarIshow">

    <progress class="bar" :value="value" max="100"></progress>
    <span class="bar__value">{{ value }}%</span>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
const props = defineProps({
  progressBarIshow: {
    type: Boolean,
    default: false,
  },
});
let emit = defineEmits(["update:progressBarIshow", "close"]);
 
const value = ref(0);
const max = 100;
let timer;

const bar = ref(null);
function move() {
  timer = setInterval(() => {
    if (value.value == max) {
      clearInterval(timer);
      emit("update:progressBarIshow", false);
       emit("close", false);
      value.value = 0;
    } else {
      value.value += 20;
    }
  }, 80);
}

defineExpose({
    move
  })



onMounted(() => {

});
</script>
<style scoped lang="scss">
.neon-bar {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  bottom: 0px;
  left: 50%;
  transform: translateX(-45%);
}
.bar {
  -webkit-appearance: none;
  height: 1.4em;
  width: 80%;
}

.bar::-webkit-progress-bar {
  padding: 0.3em;
  border-radius: calc(1.4em / 2);
  background: #1e1e1e;
}

.bar::-webkit-progress-value {
  background: #03fcc2;
  box-shadow: 0 0 0.6em #0dfcc4, 0 0 0.8em #17fcc7;
  border-radius: calc(1.4em / 2);
}

.bar__value {
  color: #fc0349;
  font-size: 1.2em;
  line-height: 1.4em;
  letter-spacing: 1px;
  text-shadow: 0 0 0.3em #f70348, 0 0 0.6em #de0340;
  margin-left: 0.5em;
}
</style>
